<template>
  <div class="home">
    <!-- banner -->
    <div class="banner shadow">
        <el-carousel trigger="click" height="300px">
            <el-carousel-item v-for="item in banners" :key="item.id">
            <div class="imgbox" :style="{backgroundImage: `url(${item.src})`}"></div>
            </el-carousel-item>
        </el-carousel>
    </div>
    <!-- 标题 -->
    <Title />
    <!-- 资讯、办法 -->
    <section class="flex between information">
        <Panel title="最新资讯" width="595px" more="/information">
            <ul slot="content">
                <li class="flex between" v-for="item of informations" :key="item.id">
                    <div><a class="middle" @click="toInfoDetail(item)" href="#">{{ item.title }}</a></div>
                    <div><span class="middle">{{ item.create_time }}</span></div>
                </li>
            </ul>
        </Panel>
        <Panel title="安全指导办法" width="595px">
            <ul slot="content">
                <li class="flex between" v-for="item of informations" :key="item.id">
                    <div><a class="middle" href="#">{{ item.title }}</a></div>
                    <div><span class="middle">{{ item.data }}</span></div>
                </li>
            </ul>
        </Panel>
    </section>
    <div class="online-course shadow">
        <div class="head">
            <h4>在线课程</h4>
            <div class="hot small">热门推荐</div>
            <el-button type="primary" size="mini" @click="moreCourse">更多课程</el-button>
        </div>
        <div class="clearfix courses">
            <Course v-for="course of onlineCourses"
                @click.native="courseDetail(course)"
                :key="course.id"
                :course="course"
                width="275px"
            ></Course>
        </div>
    </div>
  </div>
</template>

<script>

import Title from '@/components/Title'
import Panel from '@/components/Panel'
import Course from '@/components/Course'
import Api from '@/api'

export default {
    components: {
        Title,
        Panel,
        Course
    },
    data() {
        return {
            banners: [
                { id: 1, src: require('@/assets/img/index/b1.jpg') },
                { id: 2, src: require('@/assets/img/index/b2.jpg') },
                { id: 3, src: require('@/assets/img/index/b3.jpg') },
                { id: 4, src: require('@/assets/img/index/b4.jpg') }
            ],
            informations: [
                
            ],
            onlineCourses: [
                {id: 1, title: '以习近平法制思想为指导全面推进依法治国', teacher: '张胜男', duration: '1:00:32', lesson: 3, img: require('@/assets/img/index/c1.png')},
                {id: 2, title: '用习近平法治思想引领法治中国建设(下)', teacher: '张胜男', duration: '1:00:32', lesson: 3, img: require('@/assets/img/index/c2.png')},
                {id: 3, title: '建立新中国的构想及实践 (下)', teacher: '张胜男', duration: '1:00:32', lesson: 3, img: require('@/assets/img/index/c3.png')},
                {id: 4, title: '在新民主主义革命时期的奋斗历程及启示(下)', teacher: '张胜男', duration: '1:00:32', lesson: 3, img: require('@/assets/img/index/c4.png')}
            ]
        }
    },
    mounted() {
        this.getCourseList()
        this.getInfoPage()
    },
    methods: {
        toInfoDetail(item) {
            this.$router.push(`/information/${item.id}`)
        },
        moreCourse() {
            this.$router.push('/course')
        },
        getInfoPage() {
            Api.getInfoPage({pageNum: 1, pageSize: 6}).then(res => {
                this.informations = res.data.rows || []
            })
        },
        getCourseList() {
            let params = {
                pageNum: 1,
                pageSize: 12
            }
            Api.courseListPage(params).then(res => {
                this.onlineCourses = res.data.rows
            })
        },
        // 点击课程
        courseDetail(course) {
            console.log(course)
            // Api.pubCourseList().then(res => {
            //     console.log(res)
            // })
           
            this.$router.push(`/course/${course.id}`)
        }
    }
}
</script>

<style lang="scss" scoped>

.home {
    // height: 2000px;
  .banner {
    padding: 10px;
    margin-top: 30px;
    .imgbox {
      height: 100%;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
    }
  }
  .information {
    li {
        padding: 10px;
        border-bottom: 1px solid #eee;
    }
  }
  .online-course {
    margin-top: 20px;
    padding: 20px;
    .head {
        text-align: center;
        margin-bottom: 20px;
        position: relative;
        h4 {
            color: var(--color-primary);
            font-size: 18px;
            margin-bottom: 10px;
        }
        .el-button {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
        }
    }
    .courses {
        .course {
            float: left;
            margin-bottom: 20px;
            &:not(:nth-of-type(4n)) {
                margin-right: 20px;
            }
        }
    }
  }
}
</style>